<script setup lang="ts">
import { AppConfig } from '@/config'
import { request } from '@/network/axios'
import type { SymmetryStatistics } from '@/types/symmetry'
import { ArrowPathIcon, ArrowRightIcon, ArrowsUpDownIcon, CubeIcon, Squares2X2Icon } from '@heroicons/vue/24/outline'
import { computed, type Component } from 'vue'
import { useRequest } from 'vue-hooks-plus'
import { useI18n } from 'vue-i18n'

const { t } = useI18n()

const { data } = useRequest(() => request<SymmetryStatistics>('/symmetry/statistics'))

const statsDisplay = computed(() => [
  { label: 'stats.pointGroups', value: data.value?.pointGroups.total },
  { label: 'stats.spaceGroups', value: data.value?.spaceGroups.total },
  { label: 'stats.magneticSpaceGroups', value: data.value?.magneticSpaceGroups.total },
  { label: 'stats.spinSpaceGroups', value: data.value?.spinSpaceGroups.total }
])

// 样式变体配置
const colorVariants = {
  orange: {
    bg: 'bg-orange-500/10',
    text: 'text-orange-500',
    hover: 'group-hover:bg-orange-500'
  },
  pink: {
    bg: 'bg-pink-500/10',
    text: 'text-pink-500',
    hover: 'group-hover:bg-pink-500'
  },
  purple: {
    bg: 'bg-purple-500/10',
    text: 'text-purple-500',
    hover: 'group-hover:bg-purple-500'
  },
  blue: {
    bg: 'bg-blue-500/10',
    text: 'text-blue-500',
    hover: 'group-hover:bg-blue-500'
  }
}

interface Module {
  path: string
  titleKey: string
  descKey: string
  icon: Component
  color: keyof typeof colorVariants
  tags: string[]
}

const modules = computed<Module[]>(() => [
  {
    path: '/point-groups',
    titleKey: 'views.home.pointGroups.title',
    descKey: 'views.home.pointGroups.description',
    icon: CubeIcon,
    color: 'orange',
    tags: ['views.home.pointGroups.badge1', 'views.home.pointGroups.badge2', 'views.home.pointGroups.badge3']
  },
  {
    path: '/space-groups',
    titleKey: 'views.home.spaceGroups.title',
    descKey: 'views.home.spaceGroups.description',
    icon: Squares2X2Icon,
    color: 'pink',
    tags: ['views.home.spaceGroups.badge1', 'views.home.spaceGroups.badge2', 'views.home.spaceGroups.badge3']
  },
  {
    path: '/magnetic-groups',
    titleKey: 'views.home.magneticGroups.title',
    descKey: 'views.home.magneticGroups.description',
    icon: ArrowsUpDownIcon,
    color: 'purple',
    tags: ['views.home.magneticGroups.badge1', 'views.home.magneticGroups.badge2', 'views.home.magneticGroups.badge3', 'views.home.magneticGroups.badge4']
  },
  {
    path: '/spin-groups',
    titleKey: 'views.home.spinGroups.title',
    descKey: 'views.home.spinGroups.description',
    icon: ArrowPathIcon,
    color: 'blue',
    tags: ['views.home.spinGroups.badge1', 'views.home.spinGroups.badge2', 'views.home.spinGroups.badge3']
  }
])
</script>

<template>
  <div class="hero py-12">
    <div class="hero-content flex-col gap-8 text-center">
      <!-- Logo -->
      <div class="group animate-enter relative" style="animation-delay: 0ms">
        <div class="bg-primary/20 absolute -inset-4 rounded-full opacity-0 blur-2xl transition-opacity group-hover:opacity-100"></div>
        <img src="/favicon.png" alt="HSP Logo" class="size-36 drop-shadow-2xl transition-transform duration-500 hover:scale-110 hover:rotate-3" />
      </div>

      <!-- Title -->
      <h1 class="animate-enter text-7xl font-bold tracking-tight" style="animation-delay: 100ms">
        {{ t(AppConfig.name) }}
      </h1>

      <!-- Description -->
      <p class="animate-enter text-xl font-medium" style="animation-delay: 200ms">
        {{ t('views.home.description') }}
      </p>

      <!-- Stats -->
      <div class="stats animate-enter shadow-xl backdrop-blur-md" style="animation-delay: 300ms">
        <div v-for="(stat, index) in statsDisplay" :key="index" class="stat place-items-center">
          <div class="stat-title tracking-widest uppercase opacity-70">{{ t(stat.label) }}</div>
          <div class="stat-value text-primary">{{ stat.value || '-' }}</div>
        </div>
      </div>
    </div>
  </div>

  <!-- Modules Grid -->
  <div class="grid grid-cols-2 gap-6 pb-24">
    <router-link
      v-for="(item, index) in modules"
      :key="item.path"
      :to="item.path"
      class="card animate-enter bg-base-100 group shadow-sm transition-all hover:scale-[1.02] hover:shadow-2xl"
      :style="{ animationDelay: `${index * 100 + 400}ms` }"
    >
      <div class="card-body gap-6">
        <div :class="['flex-center size-16 rounded-2xl', colorVariants[item.color].bg]">
          <component :is="item.icon" :class="['size-8', colorVariants[item.color].text]" />
        </div>

        <h2 class="card-title text-2xl">{{ t(item.titleKey) }}</h2>
        <p class="text-base-content/70 font-medium">{{ t(item.descKey) }}</p>

        <div class="card-actions justify-between">
          <div v-for="tag in item.tags" :key="tag" class="badge py-4 font-bold" :class="[colorVariants[item.color].bg, colorVariants[item.color].text]">
            {{ t(tag) }}
          </div>

          <div class="btn btn-circle bg-base-100 ml-auto transition-all duration-500 group-hover:text-white" :class="[colorVariants[item.color].hover]">
            <ArrowRightIcon class="size-5 transition-transform group-hover:translate-x-1" />
          </div>
        </div>
      </div>
    </router-link>
  </div>
</template>
